<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/background/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/background/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/background/css/xadmin.css">
    <script src="${pageContext.request.contextPath}/background/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/background/lib/layui/layui.js"
            charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/background/js/xadmin.js"></script>
</head>


<body>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i
                        class="layui-icon">&#xe605;</i>
                </div>
            </th>
            <th>动物编号</th>
            <th>动物类型</th>
            <th>名字</th>
            <th>年龄</th>
            <th>性格描述</th>
            <th>领养状态</th>
            <th>照片</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
        <c:forEach items="${all_animal}" var="animal">
            <tr>
                <td>
                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i
                            class="layui-icon">&#xe605;</i>
                    </div>
                </td>
                <td>${animal.anId}</td>
                <td>${animal.anTypeId}</td>
                <td>${animal.anName}</td>
                <td>${animal.anGge}</td>
                <td>${animal.anFormation}</td>
                <td>${animal.anStat}</td>
                <td><img src="${animal.anPicture}"></td>

                <td class="td-manage">
                    <a title="删除" onclick="member_del(this,'${animal.anId}')" href="javascript:">
                        <i class="layui-icon">&#xe640;</i>
                    </a>

                </td>

            </tr>
        </c:forEach>
        </tbody>

        <script>
            /*用户-删除*/
            function member_del(obj, an_id) {
                layer.confirm('确认要删除吗？', function (index) {
                    //发异步删除数据
                    $.ajax({
                        url: "deleteAnimalByIdBg",
                        data: {"an_id": an_id},//servlet按照"classobj_id"取值
                        type: "POST",
                        success: function (data) {//从servlet获取返回数据data:{SUCCESS ERREO}
                            if (data == "SUCCESS") {//如果数据库返回说明删除成功
                                $(obj).parents("tr").remove();//无需重新访问数据库，从页面直接删除组件
                                layer.msg('已删除!', {icon: 1, time: 1000});
                            } else {
                                layer.alert(data, {title: "删除失败"});
                            }
                        }
                    });
                });
            }

        </script>
    </table>
</body>
</html>
